// // 这是主导航的入口：即登录成功之后跳转的页面
// import React from 'react';
// import './LeftNavPage.css'
// import { Layout, Menu, Breadcrumb } from 'antd';
// import mylogo from '../../../src/image/mylogo.png'
// // import {Link} from "react-router-dom";
// // import PropTypes from 'prop-types'
// import {
//     LineChartOutlined,
//     UnorderedListOutlined ,
//     ShoppingOutlined ,
//     UsergroupAddOutlined ,
//     GiftOutlined ,
//     UserOutlined,
// } from '@ant-design/icons';
//
// // logo的样式
// let style={
//     width:'6vw',
//     marginLeft:'-1rem'
// }
// const { Header, Content , Sider } = Layout;
// // const { SubMenu } = Menu;
// // 具体导航的名称
// // const myBreadMap={
// //     '/App':'首页',
// //     '/App/home':'home页面',
// //     '/App/Foo':'foo页面'
// // }
// class LeftNavPage extends React.Component {
//     利用PropTypes记住所跳转每个页面的位置
//     // static contextTypes = {
//     //     router: PropTypes.object
//     // }
//
//     constructor(props,context) {
//         super(props,context);
//         this.state = {
//             collapsed: false,
//             // pathBread:null,
//             // extraBread:null
//         };
//     }
//     // getPath(){
//     //     this.state.pathBread=this.context.router.history.location.pathname.split('/').filter(i=>i);
//     //     this.state.extraBread=this.state.pathBread.map((_,index)=>{
//     //         const url=`/${this.state.pathBread.slice(0,index+1).join('/')}`;
//     //         console.log('url')
//     //         console.log(url)
//     //         return (
//     //             <Breadcrumb.Item key={url}>
//     //                 <Link to={url}>
//     //                     {myBreadMap[url]}
//     //                 </Link>
//     //             </Breadcrumb.Item>
//     //         )
//     //     })
//     // }
//     // componentWillMount() {
//     //     this.getPath()
//     // }
//     // componentWillReceiveProps() {
//     //     this.getPath()
//     // }
//     onCollapse = collapsed => {
//         console.log(collapsed);
//         this.setState({ collapsed });
//     };
//     render() {
//         const { collapsed } = this.state;
//         return (
//             <Layout theme='#E78A2A' style={{ minHeight: '100vh' }}>
//                 <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
//                     <div className="logo" src={mylogo}/>
//                     <img style={style} alt=""/>
//                     <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
//                         <Menu.Item key="1" icon={<LineChartOutlined />}>
//                             数据分析
//                         </Menu.Item>
//                         <Menu.Item key="2" icon={<ShoppingOutlined />}>
//                             商品管理
//                         </Menu.Item>
//                         <Menu.Item key="3" icon={<UnorderedListOutlined /> }>
//                             订单管理
//                         </Menu.Item>
//                         <Menu.Item key="4" icon={<UserOutlined /> }>
//                             权限管理
//                         </Menu.Item>
//                         <Menu.Item key="5" icon={<GiftOutlined /> }>
//                             优惠管理
//                         </Menu.Item>
//                         {/*<SubMenu class='ant-menu-item-selected' key="sub1" icon={<UserOutlined />} title="权限管理">*/}
//                         {/*    <Menu.Item key="4">Tom</Menu.Item>*/}
//                         {/*    <Menu.Item key="5">Bill</Menu.Item>*/}
//                         {/*    <Menu.Item key="6">Alex</Menu.Item>*/}
//                         {/*</SubMenu>*/}
//                         {/*<SubMenu class='ant-menu-item-selected' key="sub2" icon={<GiftOutlined />} title="优惠管理">*/}
//                         {/*    <Menu.Item key="7">Team 1</Menu.Item>*/}
//                         {/*    <Menu.Item key="8">Team 2</Menu.Item>*/}
//                         {/*</SubMenu>*/}
//                         <Menu.Item key="6" icon={<UsergroupAddOutlined />}>
//                             拼团管理
//                         </Menu.Item>
//                     </Menu>
//                 </Sider>
//                 <Layout className="site-layout">
//                     <Header className="site-layout-background" style={{ padding: 0 }} >
//                         这里是头部的面包屑
//                     </Header>
//                     <Content style={{ margin: '0 16px' }}>
//                         <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
//                             这里是内容
//                         </div>
//                     </Content>
//                 </Layout>
//             </Layout>
//         )
//     }
// }
//
// export default LeftNavPage

import React from 'react';
import mylogo from '../../../src/image/mylogo.png'
import {inject,observer} from "mobx-react";
import {NavLink} from 'react-router-dom'
import {toJS} from 'mobx'
import {Layout, Menu} from 'antd'
import './LeftNavPage.css'
import {
    UserOutlined, ShoppingOutlined, UnorderedListOutlined,TagsOutlined,
    LineChartOutlined,ProfileOutlined, SolutionOutlined,GiftOutlined,UserDeleteOutlined,
    TrophyOutlined,MessageOutlined,TransactionOutlined,UserSwitchOutlined, UsergroupAddOutlined
} from '@ant-design/icons';

const icons= {
    goods:(<ShoppingOutlined />),
    order:(<UnorderedListOutlined />),
    ordinaryOrder:(<ProfileOutlined />),
    groupList:(<ProfileOutlined />),
    groupOrder:(<SolutionOutlined />),
    ordinaryList:(<ProfileOutlined />),
    permissions:(<UserOutlined />),
    youhuiguanli:(<GiftOutlined />),
    coupons:(<TagsOutlined />),
    activity:(<TrophyOutlined />),
    dataAna:(<LineChartOutlined />),
    news:(<MessageOutlined />),
    refundOrder:(<TransactionOutlined />),
    mer_Employee:(<UserSwitchOutlined />),
    customer:(<UserOutlined />),
    merchants:(<UserDeleteOutlined />),
    group:(<UsergroupAddOutlined />)
}

let style={
    width:'6vw',
    marginLeft:'3rem',


}
const {Sider} =Layout
const {SubMenu} =Menu
@inject('myStore')
@observer

// 渲染左边的导航栏
class LeftNavPage extends React.Component {
    // 渲染我们的导航
    nav = (list) => {
        return list.map((item, i)  => {
            if (item.children) {
                // 有主菜单就渲染SubMenu组件
                return (<SubMenu key={item.path} title={item.name}>
                    {/*如果submenu里面还有children就渲染*/}
                    {this.nav(item.children)}
                </SubMenu>)
            } else {
                return (<Menu.Item key={item.path} icon={icons[item.iconName]}>
                    <NavLink to={item.path}>{item.name}</NavLink>
                </Menu.Item>)
            }
        })
    }
    render() {
        let navList = toJS(this.props.myStore.user.navUrl)
        return (
            <Sider width={200} className="site-layout-background">
                <div className="logo"/>
                <img  src={mylogo} style={style} alt=""/>
                <Menu mode="inline"  style={{ height: '100%', borderRight: 0 }}>
                    {/*得到根据数据渲染我们的menu和submenu*/}
                    {this.nav(navList)}
                </Menu>
            </Sider>
        )
    }
}

export default LeftNavPage